<!-- 3-业绩走势图 -->
<template>
    <div>
        <!-- 1-彩色柱形图表echarts4.6.0 -->
        <div class="box">
            <h2 class="title">彩色柱形图表-1</h2>
            <bar-color-chart v-if="barChartData.length" style="width: 7.5rem; height: 3.5rem" ref="columnOne"
                :resArr="barChartData" id="barColorChart">
            </bar-color-chart>
        </div>

        <!-- 2-柱形有tip图表echarts4.6.0 -->
        <div class="box">
            <h2 class="title">柱形有tip图表-2</h2>
            <bar-tip-chart ref="columnOne" tipName1="华夏成长华夏成长" tipName2="测试测试测试测试测试测试" :tip_data1="tip_data1"
                :tip_data2="tip_data2" id="barTipChart">
            </bar-tip-chart>
        </div>

        <!-- 3-业绩走势图可拖动echarts4.6.0 -->
        <div class="box">
            <h2 class="title">业绩走势图可拖动-3</h2>
            <fund-echarts :dataObj="trendObj" ref="trendEcharts" id="trendEcharts"></fund-echarts>

            <div class="tab">
                <span class="time" :class="activeTime == item.value ? 'activeTime' : ''"
                    v-for="(item, index) in tabTimes" :key="index" @click="switchTime(item)">{{ item.name }}</span>
            </div>
        </div>

        <!-- 4、区域map图表highcharts -->
        <div class="box">
            <h2 class="title">区域map图表highcharts-4</h2>
            <div class="treebox">
                <map-chart ref="treemapOne" v-show="treemapData0.length > 0" :resArr="treemapData0" id="treemapOne"
                    style="width: 7.5rem; height: 4.02rem" class="tree-inner">
                </map-chart>
            </div>

            <div class="treebox">
                <map-chart ref="treemapTwo" v-show="treemapData1.length > 0" :resArr="treemapData1" id="treemapTwo"
                    style="width: 7.5rem; height: 4.02rem" class="tree-inner">
                </map-chart>
            </div>
        </div>

        <!-- 5、半圆-echarts4.6.0 -->
        <div class="box">
            <h2 class="title">半圆-仪表盘-5</h2>
            <div class="fundScoreCon">
                <div class="fundScoreLeftCon">
                    <sortEchart ref="leftChart" :marginleft="15" :id="'leftChart'" showName="持仓占比" :score="66"
                        :type="'left'">
                    </sortEchart>
                </div>
                <div class="fundScoreRightCon">
                    <sortEchart ref="rightChart" :id="'rightChart'" showName="持仓占比" :score="88" :type="'right'">
                    </sortEchart>
                </div>
            </div>
        </div>

        <!-- 6、圆饼图 -->
        <div class="box">
            <h2 class="title">环形图-6</h2>
            <div class="fundScoreCon">
                <div class="fundScoreLeftCon">
                    <chart-pie id="leftPie" :pieData="pieTipData0" :total="11" style="width: 2.5rem; height: 3.2rem"
                        ref="rpieData0"></chart-pie>
                    <div class="echartsTip">
                        <ul>
                            <li v-for="(item, index) in pieTipData0" :key="index">
                                <span class="squre" :style="{ background: item.color }"></span>
                                <span class="echartsName">{{
                  item.name ? item.name : "--"
                }}</span>
                                <span class="echartsRatio">{{ item.value ? item.value : "--" }}%</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="fundScoreRightCon">
                    <chart-pie id="rightPie" :pieData="pieTipData1" :total="22" ref="rpieData1"
                        style="width: 2.5rem; height: 3.2rem"></chart-pie>
                    <div class="echartsTip">
                        <ul>
                            <li v-for="(item, index) in pieTipData1" :key="index">
                                <span class="squre" :style="{ background: item.color }"></span>
                                <span class="echartsName">{{
                  item.name ? item.name : "--"
                }}</span>
                                <span class="echartsRatio">{{ item.value ? item.value : "--" }}%</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 7、雷达图 -->
        <div class="box">
            <h2 class="title">雷达图-7</h2>
            <radarChart :fundOverview1Data="fundOverview1Data" :fundOverview2Data="fundOverview2Data" :fundName1="
          fundOverview1Data.fundShortName ? fundOverview1Data.fundShortName : ''
        " :fundName2="
          fundOverview2Data.fundShortName ? fundOverview2Data.fundShortName : ''
        " ref="radarChart">
            </radarChart>
        </div>
        <!-- 8、树型矩型图表 -->
        <div class="box">
            <h2 class="title">树型矩型图表echart^5.3.1-8</h2>
            <positionProductEcharts ref="positionProductEcharts" id="positionProductEcharts"></positionProductEcharts>
            <!-- <positionProductEcharts ref="positionProductEcharts"></positionProductEcharts> -->
        </div>
        <!-- 9、树型矩型图表 -->
        <div class="box">
            <h2 class="title">线图片正负图表-9</h2>
            <assetTtrend :assetTtrendData="assetTtrendData ? assetTtrendData : {}" ref="trendEcharts" id="assetTtrend"
                :netStatus="netStatus">
            </assetTtrend>
        </div>
    </div>
</template>

<script>
    //和本地的mock是一样的
    import aa from "../../data/web/aa.js";
    // import radarData from "../../data/web/radarChartjson.js"; //雷达图数据
    import echartTreeMap from "../../data/web/echartTreeMap.js"; //树型矩型图表
    // import aa from "../../data/web/aa.js"; //树型矩型图表
    import * as echarts from 'echarts/core';
    import {
        TooltipComponent
    } from 'echarts/components';
    import {
        GaugeChart
    } from 'echarts/charts';
    import {
        CanvasRenderer
    } from 'echarts/renderers';
    echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
    import assetTtrendData9 from "../../data/web/assetTtrendData.js"; //走势图与正负图表数据
    import positionProductEcharts from '@/components/echartTreeMap.vue';
    import assetTtrend from '@/components/assetTtrend.vue';
    export default {
        name: "chartDemo",
        components: {
            barColorChart: (resolve) =>
                require(["@/components/barColorChart.vue"], resolve),
            barTipChart: (resolve) =>
                require(["@/components/barTipChart.vue"], resolve),
            fundEcharts: (resolve) =>
                require(["@/components/fundEcharts.vue"], resolve),
            mapChart: (resolve) => require(["@/components/mapChart.vue"], resolve),
            sortEchart: (resolve) => require(["@/components/sortEchart.vue"], resolve),
            chartPie: (resolve) => require(["@/components/chartPie.vue"], resolve),
            radarChart: (resolve) => require(["@/components/radarChart.vue"], resolve),


            positionProductEcharts,
            assetTtrend,


        },
        data() {
            return {
                //1-彩色柱形图表data
                barChartData: [{
                        total: "10",
                        num: 10,
                    },
                    {
                        total: "20",
                        num: 20,
                    },
                    {
                        total: "30",
                        num: 30,
                    },
                    {
                        total: "40",
                        num: 40,
                    },
                ],

                //2-柱形有tip图表data
                tip_data1: [13, 34],
                tip_data2: [0, 87],

                // 3-业绩走势图可拖动data
                trendObj: null,
                activeTime: "12", //默认筛选时间近一年
                //时间筛选
                tabTimes: [{
                        name: "近一月",
                        value: "1",
                        trendObj: {},
                    },
                    {
                        name: "近三月",
                        value: "3",
                        trendObj: {},
                    },
                    {
                        name: "近六月",
                        value: "6",
                        trendObj: {},
                    },
                    {
                        name: "近一年",
                        value: "12",
                        trendObj: {},
                    },
                    {
                        name: "成立以来",
                        value: "0",
                        trendObj: {},
                    },
                ],

                // 4、区域map图表highcharts
                //这个格式不能变colorValue,name,value必须有的值
                treemapData0: [{
                        colorValue: 0,
                        name: "中信证券",
                        value: 5.26,
                    },
                    {
                        colorValue: 0,
                        name: "东方财富",
                        value: 4.17,
                    },
                    {
                        colorValue: 0,
                        name: "财通证券",
                        value: 3.69,
                    },
                    {
                        colorValue: 0,
                        name: "兴业银行",
                        value: 1.96,
                    },
                    {
                        colorValue: 0,
                        name: "兴业银行",
                        value: 1.96,
                    },
                ],
                treemapData1: [{
                        colorValue: 0,
                        name: "中信证券",
                        value: 5.26,
                    },
                    {
                        colorValue: 0,
                        name: "东方财富",
                        value: 4.17,
                    },
                    {
                        colorValue: 0,
                        name: "财通证券",
                        value: 3.69,
                    },
                    {
                        colorValue: 0,
                        name: "兴业银行",
                        value: 1.96,
                    },
                    {
                        colorValue: 0,
                        name: "兴业银行",
                        value: 1.96,
                    },
                ],
                //6、圆饼图，原接口数据，需要整理成name与value,color的形式

                pieTipData: [], //tip列表共用数据
                pieTipData0: [], //tip列表0
                pieTipData1: [], //tip列表1
                colorArr: ["#00B4F8", "#FFC800", "#FB5F40", "#A353DC"], //环形图颜色

                pieTipList0: [{
                        assetAllocationRatio: "80",
                        assetTypeName: "股票1",
                    },
                    {
                        assetAllocationRatio: "20",
                        assetTypeName: "债券1",
                    },
                ],
                pieTipList1: [{
                        assetAllocationRatio: "50",
                        assetTypeName: "股票2",
                    },
                    {
                        assetAllocationRatio: "50",
                        assetTypeName: "债券2",
                    },
                ],
                // 7、雷达图
                fundOverview1Data: {},
                fundOverview2Data: {},
                fundCode1: "00001",
                fundCode2: "00003",
                assetTtrendData: {}, //线型与正负图表
                netStatus: null, //1成功，2网不好，3没数据
            };
        },
        created() {
            let _this = this;

            // 6-饼图
            let tipList;
            for (var i = 0; i < 2; i++) {
                if (i == 0) {
                    tipList = _this.pieTipList0;
                } else {
                    tipList = _this.pieTipList1;
                }
                _this.getData6(tipList, i);
            }

            // 7-雷达图
            _this.getData7();
            _this.getData3(); //3-业绩走势图可拖动
            _this.getData8();
            _this.getData9();
        },
        activated() {},
        methods: {
            //业绩走势图，获取echarts数据 dataObj为同类均值的数据
            getData3() {
                let res = "";
                let _this = this;
                let activeTime = _this.activeTime;
                let _index = _this.tabTimes.findIndex((item) => item.value == activeTime);
                let params = {
                    fundCodes: _this.fundCode1 + "," + _this.fundCode2,
                    dataRange: activeTime != 0 ? activeTime : "",
                };
                // console.log(params, "params...");

                this.$axiosHttp.http({
                        url: this.$httpConfig.fundPkTrend_api,
                        params: params,
                        method: "GET",
                    },
                    (res) => {
                        res = aa;
                        //模拟数据请求把下边逻辑加这里就行，mock数据太慢了，所以引入json来实现功能
                        // mock数据运行npm run dev
                        if (res) {
                            let data = aa.data;
                            let date = [],
                                arr1 = [],
                                arr2 = [],
                                arr3 = [];
                            let Data1 = data[0].chinamfTendOfIndex; //第一支基金业绩走势
                            let Data2 = data[1].chinamfTendOfIndex; //第二支基金业绩走势
                            let Data3 = data[2].chinamfTendOfIndex; //沪深300

                            Data1.forEach((item, index) => {
                                arr1.push([item.trdDt, item.chgrat]);
                            });
                            Data2.forEach((item, index) => {
                                arr2.push([item.trdDt, item.chgrat]);
                            });
                            Data3.forEach((item, index) => {
                                date.push(item.trdDt);
                                arr3.push([item.trdDt, item.chgrat]);
                            });
                            this.$nextTick(() => {
                                _this.trendObj = {
                                    date,
                                    fund1Data: arr1,
                                    fund2Data: arr2,
                                    fund3Data: arr3,
                                    fund1Name: _this.fundOverview1Data.fundShortName ? _this
                                        .fundOverview1Data.fundShortName : '',
                                    fund2Name: _this.fundOverview2Data.fundShortName ? _this
                                        .fundOverview2Data.fundShortName : '',
                                };
                                _this.tabTimes[_index].trendObj = _this.trendObj;
                            })

                        }
                    },
                    (res) => {},
                    //无数据状态接口1000
                    (res) => {}
                );
            },
            //时间筛选
            switchTime(obj) {
                this.activeTime = obj.value;
                if (this.$utils.getVarType.isObjEmpty(obj.trendObj)) {
                    this.trendObj = obj.trendObj;
                    this.isDataChanged(false);
                } else {
                    this.isDataChanged(true);
                    this.getData3();
                }
            },
            isDataChanged(status) {
                let _this = this;
                this.$nextTick(() => {
                    //非货基走势图数据加载显示
                    this.$refs.trendEcharts &&
                        (this.$refs.trendEcharts.dataChanged = status);
                });
            },
            // 6、图饼图
            getData6(tipList, index) {
                let _this = this;
                _this.pieTipData = [];
                let colorArr = ["#00B4F8", "#FFC800", "#FB5F40", "#A353DC"];
                //tip列表
                tipList.forEach((element, index) => {
                    _this.pieTipData.push({
                        value: element.assetAllocationRatio,
                        name: element.assetTypeName,
                    });
                });
                let tipListLen = tipList.length;
                // 为了更好的兼容手机，这里的legend是单独处理，颜色与和pie的颜色需分别的设置
                for (let i = 0; i < tipListLen; i++) {
                    _this.pieTipData[i].color = colorArr[i];
                }
                // 判断调用各自
                if (index == 0) {
                    _this.$refs.rpieData0 ? _this.$refs.rpieData0.showPieChart() : "";
                    _this.pieTipData0 = _this.pieTipData;
                } else {
                    _this.$refs.rpieData1 ? _this.$refs.rpieData1.showPieChart() : "";
                    _this.pieTipData1 = _this.pieTipData;
                }
            },
            //7、雷达图
            getData7() {
                let _this = this;
                this.$axiosHttp.http({
                        url: this.$httpConfig.radarChartjson_api,
                        params: {},
                        method: "GET",
                    },
                    (res) => {},
                    (res) => {
                        let radarData = res;
                        this.$nextTick(() => {
                            if (radarData.data[0]) {
                                _this.fundOverview1Data = radarData.data[0].fundOverview1Data;
                                _this.fundOverview2Data = radarData.data[0].fundOverview2Data;
                            }
                        });
                    }
                    //无数据状态接口1000
                );
            },
            getData8() {
                // 调树型矩形图
                let arr = [];
                let listData = echartTreeMap.data.list
                listData.forEach((item, index) => {
                    arr.push({
                        name: item.stockName,
                        // value 是%值加起来要是100 数太大显示不出来
                        value: item.stockValueToNav,
                    })
                })
                //  arr是整理成name与value转成echarts图表能用的数据
                // this.positionProductArr= [{
                //          name: '贵州茅台',
                //          value: 9.74
                //      },
                //      {
                //          name: '山西汾酒',
                //          value: 8.74
                //      },
                //      {
                //          name: '五粮液',
                //          value: 8.67
                //      },
                //  ]
                this.$nextTick(() => {
                    // 组件用import引入 就能找到$refs
                    this.$refs.positionProductEcharts.drawPositionProductEcharts(arr)
                })

            },
            // 线型与正负图表
            getData9() {
                let _this = this;
                // 模拟数据是实际项目中的数据返回格式
                /**
                 * aumVOS:X轴时间坐标与总资产数据
                 * outInAmtTrendVOS：资金净流出入数据入柱形图红绿色，红正，绿负
                 * */
                let data = assetTtrendData9;
                let date = [];
                let arr1 = [],
                    arr2 = [],
                    arr3 = [];
                let Data1 = data.aumVOS; //走势线
                let Data2 = data.outInAmtTrendVOS; //正负柱图
                Data1.forEach((item, index) => {
                    date.push(item.custAumDate);
                    // 0下标日期，1下标正常值，2有千位分隔符的 ['2020-11-19', '-10.00', '-10.00']
                    arr1.push([item.custAumDate, item.groupHoldShares, item.groupHoldSharesMask]);
                });
                Data2.forEach((item, index) => {
                    arr2.push([item.accAmtDate, item.outInAmt, item.outInAmtMask]);
                });
                this.$nextTick(() => {
                    _this.assetTtrendData = {
                        deadline: data.deadline,
                        date,
                        fund1Data: arr1,
                        fund2Data: arr2,
                    };
                });
                //数据正常
                _this.netStatus = 1;
                //网不好
                // _this.netStatus = 2;
                //暂无数据
                // _this.netStatus = 3;
            }
        },
        mounted() {

        },
    };
</script>

<style lang="less">
    .box {
        margin-bottom: 1.5rem;
    }

    .title {
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .trendCharts {
        padding: 0.4rem 0.3rem;

        .netWorkError {
            min-height: 5.2rem;
            line-height: 5.2rem;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 0.24rem;
            font-family: PingFangSC, PingFangSC-Regular;
            color: #999999;
        }

        .trend {
            .chartSeat {
                min-height: 5.2rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .trendChartNoData {
            margin: 0.2rem 0;
            min-height: 5rem;
            height: 100%;
        }

        .trendChart {
            width: 100%;
        }

        .tab {
            height: 0.42rem;
            display: flex;
            background: #fff;
            align-items: center;
            justify-content: space-between;
            margin-top: 0.1rem;

            .time {
                background: #fff;
                font-size: 0.22rem;
                font-family: PingFangSC-Regular;
                text-align: center;
                color: #999999;
                padding: 0.1rem 0.17rem;
            }

            .activeTime {
                background: #edeff5 !important;
                color: #1b337e !important;
                border-radius: 10px;
            }
        }

        .tabTitle {
            width: 100%;

            .tabTitleTxt {
                margin-top: 0.3rem;
                font-size: 0.32rem;
                color: #868e9f;
                border-bottom: 1px solid rgba(231, 233, 237, 0.5);
                display: flex;

                div {
                    display: inline-block;
                }

                .tabTitleName {
                    .active {
                        color: #121c32;
                        font-weight: 600;

                        .bottomLine {
                            width: 1.24rem;
                            height: 0.04rem;
                            margin-top: 0.3rem;
                            background: linear-gradient(135deg, #6c83c9, #061d6a);
                            border-radius: 0.04rem;
                        }
                    }

                    .line {
                        margin: 0 0.3rem;
                        width: 0;
                        height: 0.3rem;
                        border: 1px solid #e7e9ed;
                        vertical-align: middle;
                    }

                    &:last-child {
                        .line {
                            display: none;
                        }
                    }
                }

                .expiryDate {
                    margin-left: auto;
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-size: 0.24rem;
                    font-family: PingFangSC, PingFangSC-Regular;
                    color: #868e9f;
                }
            }
        }
    }

    .tab {
        height: 0.42rem;
        display: flex;
        background: #fff;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.1rem;

        .time {
            background: #fff;
            font-size: 0.22rem;
            font-family: PingFangSC-Regular;
            text-align: center;
            color: #999999;
            padding: 0.1rem 0.17rem;
        }

        .activeTime {
            background: #edeff5 !important;
            color: #1b337e !important;
            border-radius: 10px;
        }
    }

    // 4
    .treebox {
        width: 3.3rem;
        overflow: auto;
        display: inline-block;
        margin: 0 0.2rem;
        // overflow: hidden;
    }

    .treebox::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0.06rem;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }

    .treebox::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(7,104,248);
        background: #0768f8;
    }

    .treebox::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        width: 1rem;
        border-radius: 10px;
        background: #fff;
    }

    .fundScoreCon {
        display: flex;

        &>div {
            flex: 1;

            &>div {
                display: flex;
                justify-content: center;
            }
        }
    }

    .echartsTip .squre {
        display: inline-block;
        width: 0.18rem;
        height: 0.18rem;
        border-radius: 0.06rem;
    }
</style>
